// 直接原生实现一个表格
import React from 'react';

interface Column {
  key: string;
  title: string;
  render?: (value: any, record: any) => React.ReactNode;
}

interface Data {
  key: string;
  [key: string]: any;
}

interface MyTableProps {
  columns: Column[];
  data: Data[];
  maxHeight?: number;
}

const MyTable: React.FC<MyTableProps> = (props: MyTableProps) => {
  const { columns, data } = props;

  const containerStyle: React.CSSProperties = {
    display: 'grid',
    gridTemplateRows: 'auto 1fr', // 表头固定，表体自适应
    height: props.maxHeight ? `${props.maxHeight}px` : '400px',
    border: '1px solid #dee2e6',
    borderRadius: '8px',
    overflow: 'hidden',
  };

  const headerStyle: React.CSSProperties = {
    display: 'grid',
    gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
    backgroundColor: '#f8f9fa',
    color: '#495057',
    fontWeight: '600',
    textAlign: 'left',
    padding: '16px 12px',
    borderBottom: '2px solid #dee2e6',
  };

  const bodyStyle: React.CSSProperties = {
    overflowY: 'auto',
    overflowX: 'hidden',
  };

  const rowStyle: React.CSSProperties = {
    display: 'grid',
    gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
    padding: '12px',
    borderBottom: '1px solid #dee2e6',
    transition: 'background-color 0.2s ease',
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2 style={{ marginBottom: '20px', color: '#333' }}>数据表格</h2>
      <div style={containerStyle}>
        <div style={headerStyle}>
          {columns.map(column => (
            <div key={column.key}>{column.title}</div>
          ))}
        </div>
        <div style={bodyStyle}>
          {data.map(item => (
            <div
              key={item.key}
              style={rowStyle}
              onMouseEnter={e =>
                (e.currentTarget.style.backgroundColor = '#f8f9fa')
              }
              onMouseLeave={e =>
                (e.currentTarget.style.backgroundColor = 'transparent')
              }
            >
              {columns.map(column => (
                <div key={column.key}>
                  {column.render
                    ? column.render(item[column.key], item)
                    : item[column.key]}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default MyTable;
